<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dojo Nested Target Test</title>

<script type="text/javascript">
	var djConfig = { isDebug: true };
</script>

<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.dnd.*");
	dojo.require("dojo.event.*");


	function byId(id){
		return dojo.byId(id);
	}

	function outerMove(){
		dojo.debug("outer");
	}

	function innerMove(){
		dojo.debug("inner");
	}

	function init(){
		dojo.dnd.dragManager.nestedTargets = true;

		new dojo.dnd.HtmlDragSource(byId("source"), "source");
		var dt1 = new dojo.dnd.HtmlDropTarget(byId("outer"), ["*"]);
		dojo.event.connect(dt1, "onDragOver", outerMove);
		var dt2 = new dojo.dnd.HtmlDropTarget(byId("inner"), ["*"]);
		dojo.event.connect(dt2, "onDragOver", innerMove);
		var dt3 = new dojo.dnd.HtmlDropTarget(dojo.byId("third"), ["source"]);
		dojo.debug("init'd");
	}

	dojo.addOnLoad(init);
</script>
</head>
<body>
<div style="width: 50px; height: 30px; border: 1px dotted black;" id="source">source</div>

<div style="width: 400px; height: 400px; border: 1px solid black;" id="outer">
	outer drop target
	<div style="width: 200px; height: 200px; border: 1px dotted black;" id="inner">
		<p>inner drop target</p>
	</div>
</div>
<div id="third" style="margin-top:1em;width:200px;height:200px;border:1px solid red">
another target!
</div>
<div id="dojoDebug">Debug!</div>
</body>
</html>